<template>
  <view class="bigbox">
    <view class="headerIcon">
      <view class="headerIcon-img-box">
        <image class="headerIcon-img" src="http://localhost:3000/static/wode.png"></image>
      </view>
      <view class="headerIcon-text" @click="goLogin">{{aname}}</view>
    </view>

    <view class="costPath">
      <view class="costPath-box">
        <view>
          <image class="costPath-img" src="http://localhost:3000/static/形状22(1).png" mode=""></image>
        </view>
        <view>未付款</view>
      </view>
      <view class="costPath-box">
        <view>
          <image class="costPath-img" src="http://localhost:3000/static/形状23.png" mode=""></image>
        </view>
        <view>已付款</view>
      </view>
      <view class="costPath-box">
        <view>
          <image class="costPath-img" src="http://localhost:3000/static/形状25.png" mode=""></image>
        </view>
        <view>已完成</view>
      </view>
    </view>

    <view class="moreChoose">
      <view class="moreChoose-little-box">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状30.png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            我的优惠券
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>

      <view class="moreChoose-little-box">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状21(2).png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            我的收藏
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>

      <view class="moreChoose-little-box">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状2(3).png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            我的消息
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>

      <view class="moreChoose-little-box moreChoose-little-box2">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状31(1).png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            联系客服
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>

      <view class="moreChoose-little-box">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状29(1).png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            收货地址
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>

      <view class="moreChoose-little-box">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状28.png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            问题反馈
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>

      <view class="moreChoose-little-box">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状27.png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            账号安全
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>

      <view class="moreChoose-little-box">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状26.png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            通用设置
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>

      <view class="moreChoose-little-box">
        <view class="moreChoose-left">
          <view class="moreChoose-icon">
            <image class="moreChoose-left-img" src="http://localhost:3000/static/形状8.png" mode=""></image>
          </view>
          <view class="moreChoose-text">
            关于安居
          </view>
        </view>
        <view class="moreChoose-right">
          <image class="moreChoose-right-img" src="http://localhost:3000/static/形状1.png" mode=""></image>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
  import badgeMix from '@/mixins/tabbar-badge.js'
  export default {
    mixins: [badgeMix],
    data() {
      return {
        aname: '未登录'
      };
    },
    onLoad(options) {
      if (this.aname == "undefined" || "") {
        this.aname = "未登录"
      } else {
        this.aname = options.name
      }
    },
    methods: {
      goLogin() {
        uni.navigateTo({
          url: "/subpkg/login/login"
        })
      }
    }
  }
</script>

<style lang="scss">
  .bigbox {
    margin-top: 40rpx;

    .headerIcon {
      display: flex;

      .headerIcon-img-box {
        padding: 54rpx 40rpx 0 88rpx;

        .headerIcon-img {
          width: 132rpx;
          height: 132rpx;
        }
      }

      .headerIcon-text {
        padding-top: 104rpx;
        color: #232e3d;
      }
    }

    .costPath {
      display: flex;
      justify-content: space-between;
      text-align: center;
      padding: 36rpx 40rpx 0;
      margin-bottom: 32rpx;

      .costPath-box {
        padding-right: 50rpx;
        border-right: 1px solid #303A48;
        height: 118rpx;

        .costPath-img {
          width: 50rpx;
          height: 51rpx;
        }
      }

    }

    .moreChoose {
      background-color: #f1f1f1;
      margin: 0 8rpx;

      .moreChoose-little-box {
        display: flex;
        justify-content: space-between;
        padding: 30rpx 0;
        background-color: #fff;
        border-bottom: 1px solid #ededed;

        .moreChoose-left {
          display: flex;

          .moreChoose-icon {
            .moreChoose-left-img {
              width: 35rpx;
              height: 35rpx;
              margin: 0 26rpx 0 24rpx;
            }
          }

          .moreChoose-text {
            color: #404040;
            line-height: 40rpx;
          }
        }

        .moreChoose-right {
          padding-right: 20rpx;

          .moreChoose-right-img {
            width: 14rpx;
            height: 25rpx;
          }
        }
      }

      .moreChoose-little-box2 {
        margin: 30rpx 0;
      }
    }
  }
</style>
